<template>
	<view class="user-set-email">
		<input type="text" class="uni-input" v-model="email" placeholder="输入你要绑定的邮箱"/>
		<input type="text" password class="uni-input" v-model="pwd" placeholder="请输入密码"/>
		<button type="primary" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable':disable}" @tap="submit">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: '',
				pwd:'',
				disable: true,
				loading: false
			}
		},
		watch:{
			email:{
				handler(val){
					this.change()
				},
				deep: true
			},
			pwd:{
				handler(val){
					this.change()
				},
				deep: true
			}
		},
		methods: {
			// 监听输入框
			change() {
				if(this.email && this.pwd){
					this.disable = false
					return
				}
				this.disable = true
			},
			// 验证层
			check() {
				if(!this.email || this.email === ""){
					uni.showToast({
						title:'邮箱不能为空',
						icon:'none'
					})
					return false
				}
				if(!this.pwd || this.pwd === ""){
					uni.showToast({
						title:'密码不能为空',
						icon:'none'
					})
					return false
				}
				// 验证邮箱格式
				let ePattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if(!ePattern.test(this.email)) {
					uni.showToast({
						title:'请输入正确邮箱格式',
						icon:'none'
					})
					return false
				}
				return true;
			},
			// 提交
			submit() {
				this.loading = true
				if(!this.check()){this.loading = false; return}
				uni.showToast({
					title:'验证通过',
					icon:'success',
					mask:false
				})
				this.loading = false
			}
		}
	}
</script>

<style scoped lang="scss">
.user-set-email{
	padding: 20upx;
	> input{
		border-bottom:1upx solid #f2f2f2;
		font-size: 30upx;
	}
	@import '../../common/css/form.scss';
}
</style>
